/* index页面 */
<template>
  <!-- 主容器div盒子 -->
  <div class="container">
    <!-- 设置上方div -->
    <div class="left-container">
      <!-- 轮播图div盒子设置 -->
      <div class="left-display">
        <span style="margin-left: 47%">办公展示</span>
        <el-divider></el-divider>
        <!-- 走马灯组件,设置4秒自动切换图片，高度为200px -->
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in imageList" :key="item.id">
            <img :src="item.idView" width="100%" height="100%" />
            <!-- 将图片存在 imageList列表中，根据id值去找到对应的src资源-->
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 左盒子更新日志组件 -->
      <div class="update-box">
        <el-collapse v-model="activeName" accordion>
          <div style="height: 20px; text-align: center; padding-bottom: 10px">
            更新日志
          </div>
          <el-collapse-item title="v0.1.3 -2021.05.30(优化)" name="2">
            <div>
              <div>1.优化后端接口方法登录信息显示。</div>
              <div>
                2.前端性能优化，使用了路由懒加载，进一步提高首页的加载速度。
              </div>
              <div>3.采用BootCDN技术，减少项目大小，提高页面反应速度。</div>
              <div>4.剔除了不必要的代码以及注释。</div>
              <div>5.新增回收站管理模块。</div>
            </div>
          </el-collapse-item>

          <el-collapse-item title="v0.1.2 -2021.05.11(优化)" name="3">
            <div>
              <div>
                1.进一步对前端项目进行优化，将组件按需导入，减少不需要的资源浪费。
              </div>
              <div>2.优化下拉菜单的按钮</div>
              <div>3.在验证登录的时候附带token的值</div>
              <div>4.优化了登录页面样式。</div>
              <div>5.优化了菜单栏会滚动的样式。</div>
            </div>
          </el-collapse-item>

          <el-collapse-item title="v0.1.2 -2021.04.28(模块化设计)" name="4">
            <div>
              <div>1.解决了跨域处理异常的问题。</div>
              <div>2.将项目模块化。</div>
              <div>
                3.分别是用户模块、部门模块、员工模块、考勤模块，解决了之前耦合高的问题。
              </div>
              <div>4.添加个人信息界面，通过header头像下拉菜单即可看到。</div>
            </div>
          </el-collapse-item>

          <el-collapse-item title="v0.1.1 -2021.04.24(修复bug)" name="5">
            <div>
              <div>1.修复Pagination 分页插件切换数据异常。</div>
              <div>2.修复员工信息删除异常。</div>
              <div>3.修复员工信息添加异常。</div>
              <div>4.修复员工信息修改异常。</div>
              <div>5.修复员工生日显示异常，并将时间格式化输出。</div>
              <div>6.引入tag组件，优化页面显示。</div>
            </div>
          </el-collapse-item>

          <el-collapse-item title="v0.1.0 -2021.04.15" name="6">
            <div>1.实现了登录功能。</div>
            <div>2.实现用户列表方法。</div>
            <div>3.实现添加和修改用户信息方法。</div>
            <div>4.实现添加和修改员工信息方法。</div>
          </el-collapse-item>

          <el-collapse-item title="v0.1.0 -2021.04.07" name="7">
            <div>1.系统总体样式设计完毕。</div>
            <div>2.新增用户管理模块。</div>
            <div>3.新增员工管理模块。</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- 下方表格div布局 -->
    <div class="right_container">
      <div>
        <i class="el-icon-info"></i>
        <span>版本信息</span>
        <el-table
          :data="tableData"
          style="width: 100%; box-shadow: 10px 10px 5px rgba(0, 0, 255, 0.2)"
          :header-cell-style="{ background: '#4d46b1', color: '#fff' }"
        >
          <el-table-column prop="name" label="版本信息" width="80px">
          </el-table-column>
          <el-table-column prop="data" label="特色" width="320px">
          </el-table-column>
        </el-table>
      </div>

      <div>
        <i class="el-icon-user-solid"></i>
        <span>开发人员</span>
        <el-table
          :data="tableData1"
          style="width: 100%; box-shadow: 10px 10px 5px rgba(0, 0, 255, 0.2)"
          :header-cell-style="{ background: '#5b99cc', color: '#fff' }"
        >
          <el-table-column prop="name" label="姓名" width="80px">
          </el-table-column>
          <el-table-column
            style="text-align: center"
            prop="duty"
            label="人员"
            width="320px"
          >
          </el-table-column>
        </el-table>
      </div>

      <div>
        <i class="el-icon-loading"></i>
        <span>技术选型</span>
        <el-table
          :data="tableData2"
          style="width: 100%; box-shadow: 10px 10px 6px rgba(0, 0, 255, 0.2)"
          :header-cell-style="{ background: '#31d6c0', color: '#fff' }"
        >
          <el-table-column prop="name" label="前/后端" width="80px">
          </el-table-column>
          <el-table-column prop="data" label="技术栈" width="320px">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      //第一个table表格的数据
      tableData: [
        {
          name: "当前版本",
          data: "v1.1.1",
        },
        {
          name: "主要特色",
          data: "员工管理/简洁/小型",
        },
      ],
      //第二个table表格的数据
      tableData1: [
        {
          name: "陈泽楷",
          duty: "代码编写与实现",
        },
        {
          name: "张芹",
          duty: "文档撰写与资料收集",
        },
      ],

      //第三个table表格的数据
      tableData2: [
        {
          name: "前端",
          data: "Vue+ ElementUI + Axios + Vue-router",
        },
        {
          name: "后端",
          data: "SpringBoot + Mybatis + Mysql + Redis",
        },
      ],
      //图片列表
      imageList: [
        {
          id: 0,
          idView: require("../../assets/images/work1.jpg"),
        },
        { id: 1, idView: require("../../assets/images/work2.jpg") },
        {
          id: 2,
          idView: require("../../assets/images/work3.jpg"),
        },
        {
          id: 3,
          idView: require("../../assets/images/work4.jpg"),
        },
      ],
    };
  },
};
</script>

<style>
/* 主体div样式 */
.container {
  width: 100%; /* 设置主盒子宽度 */
  height: 580px; /* 设置主盒子高度 */
}

/* 左边主体布局 */
.left-container {
  width: 1250px;
  height: 380px;
  display: flex; /* 设置弹性布局 */
  float: left; /* 设置浮动为左 */
}

/* 走马灯div效果样式 */
.left-display {
  width: 50%;
  height: 330px;
  border: 1px solid rgba(122, 122, 187, 0.2);
  box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
  /* 第一个参数代表x轴偏移量、第二个参数代表y轴偏移量、第三个参数代表虚实程度 */
}

/* 设置更新组件盒子样式 */
.update-box {
  width: 48%;
  height: 330px;
  margin-left: 36px;
  border: 1px solid rgba(122, 122, 187, 0.2);
  box-shadow: 10px 10px 5px rgba(122, 122, 187, 0.2);
}

/* 设置下方table样式 */
.right_container {
  width: 100%;
  height: 120px;
  float: left;
  text-align: center;
}
/* 使用伪类元素设置样式，将所有right_container中的div设置同样的样式 */
.right_container div:nth-child(n) {
  width: 400px;
  float: left;
  margin-right: 20px;
}

/* 走马灯样式 h3标题 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px; /* 设置文字行高，可以实现文字居中对齐 */
  margin: 0;
}
/* 选中偶数 */
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
/* 选中奇数 */
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
